/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  text-transform: uppercase;
  border-radius: 2px;
  -webkit-user-select: none;
  cursor: pointer;
  fill: #7d7d7d;
}

:host([round]) {
  border-radius: 50%;
}

:host([hoverStyle="background"]:hover) {
  background: #eee;
}

:host([hoverStyle="foreground"]:hover) {
  fill: #444;
}

:host([hoverStyle="background"]:active,
      [hoverStyle="background"][active]) {
  background: #e4e4e4;
}

:host([hoverStyle="foreground"]:active,
      [hoverStyle="foreground"][active]) {
  fill: #666;
}

:host([raised]) {
  background: #dfdfdf;
  box-shadow: 0 2px 10px 0px #ddd;
}

:host([raised]:hover) {
  background: #d6d6d6;
}

:host([raised]:active,
      [raised][active]) {
  background: #e6e6e6;
}

:host([primary]) {
  color: rgb(66, 128, 244);
}

:host([primary][raised]) {
  color: #fff;
  fill: #fff;
  background: rgb(66, 128, 244);
}

:host([primary][raised]:hover) {
  background: rgb(51, 103, 214);
}

:host([primary][raised]:active,
      [primary][raised][active]) {
  background: rgb(41, 93, 184);
}

:host([disabled]) {
  background: #eaeaea !important;
  color: #c9c9c9 !important;
  fill: #c9c9c9 !important;
  box-shadow: none !important;
  cursor: auto !important;
  pointer-events: none !important;
}

:host([round][disabled]) {
  background: none !important;
}

:host([primary][raised][disabled]) {
  background: rgb(66, 128, 244, 0.4) !important;
  color: #a8a8a8 !important;
}

#button {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
}

#focusBg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  top: 0;
  opacity: 0;
  border-radius: inherit;
  background: #c3c3c3;
  -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#content {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:host([padding="small"]) #content {
  padding: 2px;
}

:host([padding="none"]) #content {
  padding: 0;
}

:host([padding="medium"]) #content {
  padding: 5px;
}

:host([padding="large"]) #content {
  padding: 5px 10px;
}

:host([padding="large"][round]) #content {
  padding: 8px;
}

:host([padding="huge"]) #content {
  padding: 8px 20px;
}

:host([padding="huge"][round]) #content {
  padding: 11px;
}

:host(:focus) #focusBg {
  -webkit-transition: none;
  transition: none;
  -webkit-animation: focus-fade 0.7s infinite alternate;
  animation: focus-fade 0.7s infinite alternate;
}

@-webkit-keyframes focus-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes focus-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

::content * {
  /* Needed to put ink behind the contents */
  position: relative;
  pointer-events: none;
}
